<template>
  <view>
    <form @submit="modifyAlbumSubmit">
      <view class="modify-table">
        <view class="inline-text">相册id</view
        ><input
          class="inline-text"
          type="text"
          disabled="true"
          name="album_id"
          v-model="albumid"
        />
        <view class="inline-text">相册名</view
        ><input
          class="inline-text"
          type="text"
          maxlength="31"
          name="album_name"
          v-model="album_name"
        />
      </view>
      <view class="inline-text">相册描述</view>
      <textarea
        maxlength="255"
        name="album_description"
        v-model="album_description"
      ></textarea>
      <view
        style="padding: 5rpx; display: flex; justify-content: space-between"
      >
        <text class="inline-text">相册是否公开</text>
        <switch :checked="album_pub" name="album_public" />
      </view>
      <button form-type="submit" type="primary">确认修改</button>
    </form>
    <button type="warn" @click="deleteAlbumSubmit">删除相册</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      albumid: "",
      album_name: "",
      album_description: "",
      album_pub: false,
    };
  },
  methods: {
    deleteAlbumSubmit: function () {
      uni.showModal({
        title: "警告",
        content: "确定删除该相册吗？",
        confirmText: "删除",
        confirmColor: "red",
        cancelText: "取消",
        success: (res) => {
          console.log(res);
          this.$http
            .post(this.urlApi.album, {
              option: "delete",
              album_id: this.albumid,
            })
            .then((res) => {
              console.log(res);
              let status = res.data.status;
              switch (status) {
                case "100": {
                  uni.showToast({ title: "删除成功" });
                  uni.$emit("popalbum", { album_id: this.albumid });
                  uni.navigateBack({ delta: 2 });
                  break;
                }
                case "101": {
                  uni.showToast({ title: "删除失败", icon: "error" });
                  break;
                }
              }
            })
            .catch((err) => {
              console.log(err);
              uni.showToast({ title: "请求失败", icon: "error" });
            });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    modifyAlbumSubmit: function (e) {
      let values = e.detail.value;
      console.log(values);
      let postData = {
        option: "modify",
        album_id: values.album_id,
        album_name: values.album_name,
        album_description: values.album_description,
        album_public: values.album_public ? "pub" : "pri",
      };
      this.$http
        .post(this.urlApi.album, postData)
        .then((res) => {
          let status = res.data.status;
          switch (status) {
            case "100": {
              uni.showToast({ title: "修改成功" });
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
              break;
            }
            case "101": {
              uni.showToast({ title: "修改失败" });
              break;
            }
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "相册修改请求失败", icon: "error" });
        });
    },
    getAlbumInfo: function () {
      let postData = {
        option: "getAlbumInfo",
        album_id: this.albumid,
      };
      this.$http
        .post(this.urlApi.album, postData)
        .then((res) => {
          let status = res.data.album_status;
          let data = res.data;
          console.log(res.data);
          switch (status) {
            case "100": {
              this.album_description = data.album_description;
              this.album_name = data.album_name;
              this.album_pub = data.album_public === "pub";
              break;
            }
            case "101": {
              uni.showToast({ title: "信息获取失败", icon: "error" });
              break;
            }
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "信息请求失败", icon: "error" });
        });
    },
  },
  onLoad: function (e) {
    console.log(e.albumid);
    this.albumid = e.albumid;
    this.getAlbumInfo();
  },
};
</script>

<style>
.modify-table {
  display: grid;
  grid-template-columns: 20% 80%;
}
textarea,
uni-input {
  padding: 4%;
  width: 92%;
  border: 1px solid lightgray;
  border-radius: 5rpx;
}
.inline-text {
  font-size: 0.8em;
  padding: 5px;
  margin: 5px;
  overflow: hidden;
  white-space: nowrap;
}
</style>